<template>
  <div class="painterBox">
    <div class="optArea">
        <div class="optLeft">
            <span class="optTitle">画笔大小</span>
            <input type="range" ref="iptRange" min="3" max="5" value="3" @change="changeSize">
        </div>
        <div class="optRight">
            <div class="optBtn" @click="changeMode">{{ mode == 1 ? '画笔' : '橡皮擦' }}</div>
            <div class="optBtn" @click="resetBoard">全部清除</div>
            <div class="optBtn" @click="saveImg">保存</div>
        </div>
    </div>
    <canvas id="canvas" ref="canvas" width="600" height="300" @mousedown="startDraw" @mouseup="stopDraw"  @mousemove="patinet"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
        mode: 1,
        painting: false,
        startPoint: {
            x: undefined,
            y: undefined
        },
        mycanvas: undefined,
        context: undefined
    };
  },
  mounted () {
    window.onmouseup = () => {
        this.painting = false
    }
    this.mycanvas = this.$refs.canvas
    this.context = this.mycanvas.getContext('2d');
    this.context.lineWidth = 3;
    this.context.fillStyle='#fff';
    this.context.fillRect(0,0,this.mycanvas.width,this.mycanvas.height);
  },
  methods: {
    // 改变画笔大小
    changeSize () {
        this.context.lineWidth = this.$refs.iptRange.value
    },
    // 切换模式
    changeMode () {
        this.mode = this.mode == 1 ? 2 : 1
        this.context.strokeStyle= this.mode == 1 ? '#000' : '#fff';
    },
    // 落笔
    startDraw (e) {
        this.startPoint.x = e.offsetX
        this.startPoint.y = e.offsetY
        this.painting = true
    },
    // 停止绘画
    stopDraw () {
        this.painting = false
    },
    // 绘画
    patinet (e) {
        let newPoint = {
            x: e.offsetX,
            y: e.offsetY
        }
        if(this.painting) {
            // 画线
            this.drawLine(this.startPoint.x,this.startPoint.y,newPoint.x,newPoint.y) 
            // 将起始点替换成最新点
            this.startPoint = newPoint
        }
    },
    // 画线
    drawLine (x,y,newX,newY) {
        this.context.beginPath();
        this.context.moveTo(x, y)
        this.context.lineTo(newX,newY)
        this.context.stroke()
    },
    resetBoard () {
        this.context.fillStyle='#fff';
        this.context.fillRect(0,0,this.mycanvas.width,this.mycanvas.height);
    },
    // 保存成图片
    saveImg () {
        const url = this.mycanvas.toDataURL("image/jpg")
        const a = document.createElement("a")
        a.href = url
        a.download = '画板图片'
        a.target = "_blank"
        a.click()
    }
  }
};
</script>

<style lang="less" scoped>
.painterBox {
  margin: 40px auto 0 auto;
  display: flex;
  flex-direction: column;
  width: 600px;
  .optArea {
    display: flex;
    justify-content: space-between;
    .optLeft {
        display: flex;
        align-items: center;
        .optTitle {
            margin-right: 20px;
        }
    }
    .optRight {
        display: flex;
        justify-content: flex-end;
        .optBtn {
            margin-right: 10px;
            padding: 4px 12px;
            border: 1px solid #aaa;
            color: rgba(0,0,0,.8);
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
        }
    }
  }
  #canvas {
    margin-top: 20px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid tomato;
    background-color: #fff;
  }
}
</style>
